<template>
    <div class="login-wrapper">
    <div class="login-container">
        <el-form :model="ruleForm" :rules="rules"
                 status-icon
                 ref="ruleForm"
                 label-position="left"
                 label-width="0px"
                 class="demo-ruleForm login-page">
            <h3 class="title">系统登录</h3>
            <el-form-item prop="username">
                <el-input type="text"
                          v-model="ruleForm.username"
                          placeholder="用户名"
                ></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password"
                          v-model="ruleForm.password"
                          placeholder="密码"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-radio v-model="type" label="systemAdmin">系统管理员</el-radio>
                <el-radio style="position: relative;left: 80px" v-model="type" label="dormitoryAdmin">宿舍管理员</el-radio>
            </el-form-item>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return{
                logining: false,
                ruleForm: {
                    username: 'admin1',
                    password: '123123'
                },
                type: 'systemAdmin',
                rules: {
                    username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}]
                }
            }
        },
        methods: {
            async handleSubmit() {
      try {
        // 验证表单
        const valid = await this.$refs.ruleForm.validate()
        if (!valid) return

        this.logining = true
        
        // 使用全局axios
        const { data } = await this.$axios.get(`/${this.type}/login`, {
          params: this.ruleForm
        })

        if (data.code === 0) {
          // 存储登录状态
          localStorage.setItem(this.type, JSON.stringify(data.data))
          
          // 路由跳转
          this.$router.push(`/${this.type}`)
        } else {
          this.$alert(data.code === -1 ? '用户名不存在' : '密码错误', '提示')
        }
      } catch (error) {
        this.$message.error('登录失败: ' + error.message)
      } finally {
        this.logining = false
      }
    }
  }
}
</script>

<style scoped>
/* 新增的背景图样式 */
.login-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('../assets/img/loginback.jpg') no-repeat center center;
  background-size: cover;
}

/* 半透明容器样式 */
.login-container {
  background-color: rgba(255, 255, 255, 0.85); /* 半透明白色背景 */
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.login-page {
  border-radius: 5px;
  margin: 0 auto;
  width: 350px;
  padding: 35px 35px 15px;
  background: transparent; /* 设置为透明，让外层容器控制背景 */
}

.title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.register-text {
  width: 350px;
  text-align: right;
  margin: 10px auto 0;
  color: #666;
  font-size: 14px;
}

.register-text a {
  color: #409eff;
  text-decoration: none;
}

.register-text a:hover {
  text-decoration: underline;
}
</style>